<template>
  <div v-if="visible" class="dialog-overlay">
    <div class="dialog-container">
      <div class="dialog-header">
        <span>新建群聊</span>
        <i class="iconfont icon-guanbi" @click="close"></i>
      </div>
      <div class="dialog-body">
        <!-- 群聊名称 -->
        <div class="group-name-section">
          <label for="groupName">群聊名称</label>
          <input id="groupName" v-model="groupName" placeholder="请输入群聊名称" />
          <div v-if="groupNameError" class="text-red-500 text-sm mt-1">{{ groupNameError }}</div>
        </div>

        <!-- 初始成员 -->
        <div>
          <div class="mt-4 font-semibold">选择初始成员：</div>
          <div class="user-list">
            <div v-for="user in userList" :key="user.id" class="user-item">
              <input type="checkbox" v-model="selectedUsers" :value="user.id" />
              <avatar :info="{ name: user.name, avatar: user.avatar }" size="24px" />
              <span>{{ user.name }}</span>
            </div>
          </div>
        </div>
        <div class="flex items-center mb-2">
          <input
            type="checkbox"
            :checked="selectedUsers.length === userList.length && userList.length > 0"
            :indeterminate="selectedUsers.length > 0 && selectedUsers.length < userList.length"
            @change="toggleSelectAll"
          />
          <span class="ml-2">全选</span>
        </div>

      </div>
      <div class="dialog-footer">
        <text-button text="取消" @click="close" theme="default" />
        <text-button text="创建" theme="primary" @click="handleSubmit" />
      </div>
    </div>
  </div>
</template>


<script setup>
import { ref, watchEffect } from 'vue'
import TextButton from '@/components/TextButton.vue'
import Avatar from '@/components/Avatar.vue'

// ✅ 显式声明 props
const props = defineProps({
  visible: {
    type: Boolean,
    required: true
  },
  userList: {
    type: Array,
    default: () => []
  }
})
watchEffect(() => {
  console.log('【CreateGroupDialog】接收到的 userList:', props.userList)
})
const emit = defineEmits(['update:visible', 'submit'])

const groupName = ref('')
const selectedUsers = ref([])
const groupNameError = ref('')

const toggleSelectAll = () => {
  if (selectedUsers.value.length === props.userList.length) {
    selectedUsers.value = []
  } else {
    selectedUsers.value = props.userList.map(user => user.id)
  }
}

const handleSubmit = () => {
  if (!groupName.value.trim()) {
    groupNameError.value = '群名称不能为空'
    return
  }

  emit('submit', {
    name: groupName.value.trim(),
    members: selectedUsers.value
  })

  groupName.value = ''
  selectedUsers.value = []
  groupNameError.value = ''

  // 提交后自动关闭弹窗
  emit('update:visible', false)
}

const close = () => {
  emit('update:visible', false)
}
</script>

<style scoped>
.dialog-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background-color: rgba(0, 0, 0, 0.6);
  z-index: 999;
  display: flex;
  align-items: center;
  justify-content: center;
}

.dialog-container {
  width: 420px;
  max-width: 90vw;
  background-color: rgba(var(--background-color), 0.95);
  border-radius: 10px;
  padding: 24px;
  color: rgb(var(--text-color));
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
}

.dialog-header {
  font-size: 20px;
  font-weight: bold;
  display: flex;
  justify-content: center; /* 标题居中 */
  align-items: center;
  margin-bottom: 16px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  position: relative;
}

/* 关闭按钮右上角定位 */
.dialog-header .icon-guanbi {
  position: absolute;
  right: 0;
  top: 4px;
  cursor: pointer;
}

.dialog-body {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.group-name-section {
  display: flex;
  flex-direction: column;
}

.group-name-section label {
  font-size: 14px;
  margin-bottom: 4px;
}

.group-name-section input {
  padding: 10px 12px;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background-color: rgba(255, 255, 255, 0.05);
  font-size: 14px;
  transition: border-color 0.2s ease;
}

.group-name-section input:focus {
  border-color: var(--primary-color);
  outline: none;
}

.user-list {
  max-height: 240px;
  overflow-y: auto;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  padding: 12px;
  background-color: rgba(255, 255, 255, 0.03);
}

.user-item {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
  padding: 4px 8px;
  border-radius: 4px;
  transition: background-color 0.2s;
}

.user-item:hover {
  background-color: rgba(255, 255, 255, 0.08);
}

.dialog-footer {
  margin-top: 24px;
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}
</style>
